<template>
  <div class="wrapper">
    <div class="titleInfo">
      <span>中转仓名称：{{ detailTable[0]?.name }}</span>
      <span>中转仓编号：{{ detailTable[0]?.id }}</span>
      <span
        >中转仓经营时间:{{
          dayjs(detailTable[0]?.stationOperatingStartTime).format("HH:mm:ss") +
          "至" +
          dayjs(detailTable[0]?.stationOperatingEndTime).format("HH:mm:ss")
        }}</span
      >
    </div>
    <div class="baicInfo">
      <div>
        <div>基本信息</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="detailTable"
          >
            <el-table-column label="仓站编号" prop="id" width="260" />
            <el-table-column label="仓站名称" prop="name" />
            <el-table-column label="仓站等级" prop="stationLevelName" />
            <el-table-column label="面积(平方米)" prop="acreage" />
            <el-table-column label="所属地市" prop="cityName">
              <template #default="scope">{{ cityOptions.find(item => item.code == scope.row.city)?.name }}</template>
            </el-table-column>
            <el-table-column label="所属区县" prop="countyName" />
          </el-table>
        </div>
        <div>
          设施信息:<el-button
            type="text"
            size="small"
            @click="
              router.push({
                path: '/provinceLevel/proOrganization/proSite/proSiteManage/device',
                query: { id: detailTable[0].id }
              })
            "
            >设置设施</el-button
          >
        </div>
        <div class="device">
          <span v-for="item in facilityTable" :key="item.facilityTypeName">{{ item.facilityTypeName }}:{{ item.amount }}</span>
        </div>
        <div>关联仓经({{ stationMasterTable.length }})</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            :data="stationMasterTable"
            style="width: 100%"
          >
            <el-table-column label="工号" prop="userName" width="260" />
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="形象照" prop="avatar">
              <template #default="scope">
                <el-image :src="scope.row?.avatar" fit="cover" width="50" height="50"></el-image>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>关联驿站（小区数{{ dataInfo?.neighbourhoodCount ? dataInfo.neighbourhoodCount : 0 }}）</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            :data="dataInfo?.stage"
            style="width: 100%"
          >
            <el-table-column label="驿站名称" prop="id" width="260" />
            <el-table-column label="已关联小区" prop="neighbourhoodLIst" />
            <el-table-column label="已关联小区总户数" prop="totalHouseholds" />
          </el-table>
        </div>
        <div>关联车辆（{{ dataInfo?.vehicle?.length ? dataInfo.vehicle?.length : 0 }}）</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="dataInfo?.vehicle"
          >
            <el-table-column label="车辆编号/车牌号" prop="vehicleId" width="260" />
            <el-table-column label="车辆类型" prop="typeName" />
            <el-table-column label="当前关联人员" prop="relateUserName" />
            <el-table-column label="所需驾驶证类型" prop="driverLicenseTypeName" />
            <el-table-column label="状态" prop="vehicleStatus" />
          </el-table>
        </div>
        <div>关联配送员（{{ dataInfo?.delivery?.length ? dataInfo.delivery?.length : 0 }}）</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="dataInfo?.delivery"
          >
            <el-table-column label="工号" prop="userName" width="260" />
            <el-table-column label="姓名" prop="fullName" />
            <el-table-column label="形象照" prop="personalImagePhoto">
              <template #default="scope">
                <el-image :src="scope.row?.personalImagePhoto" fit="cover" width="50" height="50"></el-image
              ></template>
            </el-table-column>
            <el-table-column label="关联车辆" prop="vehicle" />
            <el-table-column label="车辆押金" prop="vehicleDeposit" />
            <el-table-column label="车辆使用费" prop="vehicleUsageFee" />
          </el-table>
        </div>
        <div>关联订单分拣员（{{ dataInfo?.sorting?.length ? dataInfo.sorting?.length : 0 }}）</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="dataInfo?.sorting"
          >
            <el-table-column label="工号" prop="userName" width="260" />
            <el-table-column label="姓名" prop="sortingName" />
          </el-table>
        </div>
        <div>关联店铺（{{ dataInfo?.shop?.length ? dataInfo.shop?.length : 0 }}）</div>
        <div>
          <el-table
            stripe
            border
            :cell-style="{ textAlign: 'center', fontSize: '12px' }"
            :header-cell-style="{
              textAlign: 'center',
              background: '#009688',
              color: 'white',
              fontSize: '13px',
              fontWeight: '100'
            }"
            style="width: 100%"
            :data="dataInfo?.shop"
          >
            <el-table-column label="店铺ID" prop="shopId" width="260" />
            <el-table-column label="店铺名称" prop="shopName" />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="tsx" setup name="proSiteDetail">
import dayjs from "dayjs";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Tran } from "@/api/interface/province/organizationManage";
import { tranSiteDetailAPI } from "@/api/modules/province/organizMangeAPI";
import { Dict } from "@/api/interface/dict";
import { getCityListDictAPI } from "@/api/modules/dictAPI";
import { ElMessage } from "element-plus";
const route = useRoute();
const router = useRouter();
// 详情信息
const detailTable = ref<Tran.Detail[]>([]);
// 设施列表
const facilityTable = ref<Tran.Facility[]>([]);
// 关联仓经列表
const stationMasterTable = ref<Tran.StationMaster[]>([]);
const dataInfo = ref<Tran.tranSiteDetail>();
const handleDetail = async (id: string) => {
  const { data } = await tranSiteDetailAPI(id);
  if (data) {
    detailTable.value.push(data.detail);
    facilityTable.value = data.facility;
    if (data.stationMaster) {
      stationMasterTable.value.push(data.stationMaster);
    }
    dataInfo.value = data;
  }
};
const cityOptions = ref<Dict.CityListData[]>([]);
// const countyOptions = ref<Dict.CityListData[]>([]);
const getCityListDict = async () => {
  const parentCode = ref<string>("");
  parentCode.value = JSON.parse(localStorage.getItem("userInfo") as string).province;
  const { data, code } = await getCityListDictAPI({
    parentCode: parentCode.value
  });
  if (code == "200" && data) {
    cityOptions.value = data;
  } else {
    ElMessage.error("获取城市列表失败");
  }
};
onMounted(() => {
  getCityListDict();
  if (route.query.id != undefined) {
    handleDetail(route.query.id as string);
  }
});
</script>

<style lang="scss" scoped>
body {
  font-size: 13px;
  .wrapper {
    padding: 15px;
    background-color: white;
  }
  .titleInfo {
    margin-bottom: 10px;
    span {
      margin-right: 70px;
      font-size: 13px;
      color: gray;
    }
  }
  .baicInfo {
    padding: 10px;
    font-size: 13px;
    color: gray;
    border: 1px solid #e6e6e6;
    div {
      margin-top: 12px;
    }
    .device {
      padding: 20px 10px;
      border: 1px solid #e6e6e6;
      span {
        margin-right: 60px;
      }
    }
  }
}
</style>
